<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TMOCC</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}

			.header {
				height: 71px;
				background-color: #FFFFFF;
			}

			.header-center {
				width: 1200px;
				height: 70px;
				margin: 0 auto;

			}

			.left {
				float: left;
			}

			.left img {
				margin-top: 15px;
			}

			.center {
				margin-left: 70px;
				float: left;
			}

			.center li {
				margin: auto 20px;
				float: left;

			}

			.center a {
				color: black;
				font-size: 16px;
				height: 70px;
				line-height: 70px;
			}

			.center a:hover {
				color: #4F8DFE;
			}

			.right {
				float: right;
			}

			.right li {
				float: left;
				margin: auto 10px;
			}

			.right a {
				font-size: 14px;
				color: white;
				height: 70px;
				line-height: 70px;
			}

			.right .a-fist {
				padding-right: 18px;
				border-right: white 1px solid;
			}

			.footer {
				width: 100%;
				height: 200px;
				background-color: #282c30;
			}

			.footer .xinxi {
				margin: 0 auto;
				width: 1200px;
				height: 150px;
				border-bottom: 1px solid black;
			}

			.footer .xinxi .f-xinxi {
				float: left;
				width: 700px;
				height: 200px;
			}

			.footer .xinxi .f-xinxi2 {
				float: left;
				width: 500px;
				height: 200px;

			}

			.footer .xinxi .f-xinxi ul {
				width: 500px;
				text-align: center;
				margin-left: 60px;
				margin-bottom: 20px;
			}

			.footer .xinxi .f-xinxi li {
				float: left;
				padding: 10px 20px;
				margin-top: 50px;
				margin-bottom: 20px;
				font-size: 14px;
				border-right: 1px solid #999999;
				line-height: 5px;
				height: 5px;
				text-align: center;
				color: #999999;
			}

			.footer .xinxi .f-xinxi li:hover {
				cursor: pointer;
				color: #ffffff;
			}

			.footer .xinxi .f-xinxi li:nth-child(5) {
				border: 0;
			}

			.footer .xinxi .f-xinxi span {
				float: left;
				font-size: 14px;
				width: 700px;
				color: #666666;
			}

			.footer .xinxi .f-xinxi2 img {
				float: right;
				width: 100px;
				height: 100px;
				margin-top: 25px;
			}

			.footer .xinxi .f-xinxi2 span {
				width: 325px;
				display: block;
				font-size: 14px;
				margin-top: 60px;
				margin-left: 60px;
				color: #666666;
			}

			.footer .xinxi .f-xinxi2 p {
				font-size: 14px;
				width: 400px;
				margin-left: 5px;
				margin-top: 5px;
				color: #666666;
			}

			.guanggao {
				width: 50px;
				height: 200px;
				position: fixed;
				right: 20px;
				top: 200px;
				z-index: 1000;
			}

			.guanggao ul {
				width: 50px;
			}

			.guanggao li {
				list-style: none;
				height: 50px;
				margin: 12.5px 0;
				text-align: center;
				line-height: 50px;
				border: #dddddd 1px solid;
				background-color: #ffffff;
				border-radius: 5px 5px 5px 5px;
			}

			.guanggao img {
				width: 35px;
				height: 35px;
				margin-top: 6px;
			}

			.guanggao ul li:hover {
				background-color: gainsboro;
				cursor: pointer;
			}

			.jianbian {
				height: 25px;
				background-image: linear-gradient(#f1f1f1, #ffffff);
				/* 添加渐变 */
			}


			.nav1 {
				background-color: #4390ff;
			}

			.nav1 div {
				width: 1200px;
				height: 57px;
				margin: 0 auto;
			}

			.nav1 div>span {
				display: block;
				color: white;
				font-size: 16px;
				height: 57px;
				line-height: 57px;
			}

			.nav1 div>span>a {
				display: inline-block;
				color: white;
				margin-left: 50px;
				height: 20px;
				line-height: 20px;
				background-color: #1746b4;
				padding: 4px 9px;
				font-size: 16px;
			}

			.nav {
				height: 400px;
				background-color: #FFFFFF;
			}

			.nav .nav-a {
				width: 1200px;
				height: 30px;
				margin: 0 auto;
			}

			.nav .nav-a1 {
				height: 30px;
			}

			.nav .nav-a1 li {
				list-style: none;
				float: left;
				height: 30px;
				margin-right: 7px;
			}

			.nav .nav-a1 li a {
				float: left;
				color: #666666;
				font-size: 14px;
				margin-top: -3px;
			}

			.nav2 {
				height: 50px;
				background-color: #68a9ff;
			}

			.nav2>div {
				width: 1200px;
				height: 50px;
				margin: 0 auto;
			}

			.nav2 div>span {
				float: left;
				display: inline-block;
				color: white;
				font-size: 16px;
				height: 30px;
				width: 50px;
				line-height: 30px;
				background-color: #68a9ff;
				text-align: center;
				margin-top: 10px;
			}
			.nav2 div>span:hover,
			.nav2 div>a:hover{
				cursor: pointer;
			}
			.nav2 div>a {
				width: 50px;
				float: left;
				display: inline;
				color: white;
				font-size: 16px;
				margin: auto 35px;
				line-height: 30px;
				height: 30px;
				margin-top:10px ;
			}
			.nav2 div>ul{
				display: inline-block;
				width: 350px;
				height: 50px;
			}
			.nav2 div>ul>li{
				margin-top: 10px;
				float: left;
				color: white;
				font-size: 16px;
				margin: 12.5px 20px;
				line-height: 25px;
				height: 25px;
			}
			.nav2 div>ul>li:first-child{
				border-left: 1px solid white;
				padding-left: 30px;
			}
			.nav div>ul>li:last-child{
				border-right: 1px solid white;
				padding-right: 30px;
			}
			.bannera{
				width: 1200px;
				margin: 0 auto;
				height: 50px;
				background-color: white;
			}
			.bannera span:hover{
				cursor: pointer;
			}
			.bannera span{
				display: inline-block;
				width: 85px;
				font-size: 16px;
				text-align: center;
				height: 30px;
				margin: 8px 5px;
				line-height: 30px;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #e9e9e9;
				color: #999999;
			}
			.bannera span:nth-child(1){
				margin:8px 0;
			}
			.main,.main-a{
				width: 1200px;
				margin: 0 auto;
			}
			.main>div,.main-a>div{
				width:200px;
				height: 220px;
				margin-right:40px;
				float: left;
				margin-bottom: 25px;
				margin-top: 25px;
				background-color: #ffffff;
				transition: 0.2s;
				border-radius: 5px 5px 5px 5px;
			}
			.main div:hover{
			box-shadow:0px 3px 13px 0px gray ;
			cursor: pointer;
			margin-top: 23px;
			border-radius: 5px 5px 5px 5px;
			}
			.main div img,.main-a div img{
				display: block;
				height: 113px;
				border-radius: 5px 5px 0 0;
			}
			.main-a {
				display: none;
			}
			.main>div ul,.main-a>div ul{
				width: 200px;
				margin-bottom: 40px;
				margin-top: 10px;
				height: 30px;
			}
			.main>div ul li,.main-a>div ul li{
				width: 170px;
				font-size: 14px;
				margin-left: 15px;
				color: #333333;
			}
			.main>div span,
			.main-a>div span {
				font-size: 12px;
				margin-left: 15px;
				display: inherit;
			}
			.main>div span a,
			.main-a>div span a{
				float: right;
				margin-right: 20px;
				color: #888888;
			}
			.main-a div{
				transition: 0.2s;
			}
			.main-a div:hover{
				box-shadow:0px 3px 13px 0px gray ;
				cursor: pointer;
				margin-top:23px;
			}
		</style>
	</head>
	<body>
		<div class="guanggao">
			<ul>
				<li><img src="./img/kec.png"></li>
				<li><img src="./img/线上服务.png"></li>
				<li><img src="./img/电话热线.png"></li>
			</ul>
		</div>
		<div class="header">
			<div class="header-center">
				<div class="left" onclick="window.location.href='index.html'"><a href="#"><img src="img/tmooc-logo2.png" /></a></div>
				<div class="center">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="#">免费课</a></li>
						<li><a href="#">直播课</a></li>
						<li><a href="#">精品课</a></li>
						<li><a href="#">线上班 (VIP)</a></li>
						<li><a href="#">线下班</a></li>
						<li><a href="#">达内高手</a></li>
						<li><a href="#">高校专区</a></li>
					</ul>
				</div>
				<div class="right">
					<ul>
						<li><a href="" class="a-fist">注册</a></li>
						<li><a href="">登录</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="jianbian"></div>
		<div class="nav">
			<div class="nav-a">
				<div class="nav-a1">
					<ul>
						<li><a>全部课程</a></li>
						<li><a>>前端开发</a></li>
					</ul>
				</div>
			</div>
			<div class="nav1">
				<div><span>分类:<a>Web前端</a></span></div>
			</div>
			<div class="nav2">
				<div>
					<span id="dj1" onclick="bianse1();" style="background-color: #1746b4;">全部</span>
					<a id="dj2" onclick="bianse2();">免费课</a>
					<a id="dj3" onclick="bianse3();">付费课</a>
					<a id="dj4" onclick="bianse4();">会员课</a>
					<ul>
						<li>有直播</li>
						<li>有点播</li>
						<li>有回放</li>
					</ul>
				</div>
			</div>
			<div class="bannera">
				<span id="first" onclick="chax1();" style="background-color: #4390ff; color: white;">时间</span>
				<span id="second" onclick="chax2();">好评率</span>
				<span id="third" onclick="chax3();">人气</span>
			</div>
			<div style="background-color: #f6f5fa;">
			<div class="main" id="ma">
				<div onclick="window.location.href='web.html'">
					<img src="img/18bb7bd6c71449609cf55a533adfb059.jpg" >
				<ul>
					<li>3月第二周web线上体验课</li>
				</ul>
				<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/18bb7bd6c71449609cf55a533adfb059.jpg" >
					<ul>
						<li>3月第二周web线上体验课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>45人报名</a></span>
				</div>
				<div>
					<img src="img/d98568e1db70459ebe24116058e3b351.jpg" >
					<ul>
						<li>WEB前端（WEB）跨年畅学班技术营</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/58d8faad2c1d4dca8e38310d43b60d55.png" >
					<ul>
						<li>达内在线-海南职业技术学院计算机应用专业-Web前端开</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/f264a0b882714e869ec18a57c05fa554.jpg" >
					<ul>
						<li>WEB名师启航班直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div style="clear: both;width: 0;height: 0;margin: 0; ">
				</div>
				<div>
					<img src="img/5d589dc570644c90b29e957d670fa776.jpg" >
					<ul>
						<li>WEB前端（WEB）2012训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="./img/061847ce1d844307a01f5358d9d33191.jpg" >
					<ul>
						<li>Web-JS高手进阶课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/5d589dc570644c90b29e957d670fa776.jpg" >
					<ul>
						<li>WEB前端（WEB）2009训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/351fa749e4934f28a713c77497c27233.jpg" >
					<ul>
						<li>WEB前端（WEB）2006预科班直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/fa05e8f5a8a84105b07558a3316b26be.jpg" >
					<ul>
						<li>Web前端基础精品课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div style="clear: both;width: 0;height: 0;margin: 0; ">
				</div>
				<div>
					<img src="img/5d589dc570644c90b29e957d670fa776.jpg" >
					<ul>
						<li>WEB前端（WEB）2012训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="./img/061847ce1d844307a01f5358d9d33191.jpg" >
					<ul>
						<li>Web-JS高手进阶课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/5d589dc570644c90b29e957d670fa776.jpg" >
					<ul>
						<li>WEB前端（WEB）2009训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/351fa749e4934f28a713c77497c27233.jpg" >
					<ul>
						<li>WEB前端（WEB）2006预科班直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
				<div>
					<img src="img/fa05e8f5a8a84105b07558a3316b26be.jpg" >
					<ul>
						<li>Web前端基础精品课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>2人报名</a></span>
				</div>
			</div>
			<div class="main-a" id="ma1">
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
				<ul>
					<li>职达【阿里】-技术岗面试攻略</li>
				</ul>
				<span style="color: #4f8dfe;">￥199<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>WEB全栈</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>前端交互设计(UI Design)</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥199<a style="font-weight: 400;">1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>MongoDB快速入门</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>WEB前端（WEB）2006预科班直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div style="clear: both; width: 0;height: 0; margin: 0;"></div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>3月第二周web线上体验课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>WEB前端（WEB）跨年畅学班技术营</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥299<a style="font-weight: 400;">1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>达内在线-海南职业技术学院计算机应用专业-Web前端开</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>Web-JS高手进阶课</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥299<a style="font-weight: 400;">1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>WEB前端（WEB）2012训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div style="clear: both; margin: 0;width: 0;height: 0;"></div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>WEB前端（WEB）2009训练营直播课</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>Web前端基础精品课</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥299<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>Web前端高级开发-码农博客V2.0</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥299<a style="font-weight: 400;">1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>Web前端高级开发-组件</li>
					</ul>
					<span style="color: #4f8dfe;">免费<a>1533人购买</a></span>
				</div>
				<div>
					<img src="img/06207cb9c5b84e1f910e8b61fd50b080.png" >
					<ul>
						<li>Web前端高级开发-全局样式</li>
					</ul>
					<span style="color: red; font-weight: 600;">￥299<a style="font-weight: 400;">1533人购买</a></span>
				</div>
			
			</div>
			
			<div style="clear: both;"></div>
			</div>
			<div class="footer">
				<div class="xinxi">
					<div class="f-xinxi">
						<ul>
							<li>关于我们</li>
							<li>招聘信息</li>
							<li>联系我们</li>
							<li>商务合作</li>
							<li>帮助页面</li>
						</ul>
						<span>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
						</span>
					</div>
					<div class="f-xinxi2">
						<img src="img/erweima.jpg">
						<span>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</span>
						<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
					</div>
				</div>
			</div>
			<script type="text/javascript">
				function chax1(){
						document.getElementById('first').style.cssText='background-color: #4390ff; color: white;';
						document.getElementById('second').style.cssText='background-color: white;';
						document.getElementById('third').style.cssText='background-color: white;';
						document.getElementById('ma').style.cssText='display: block;';
						document.getElementById('ma1').style.cssText='display: none;';
						
				}
				function chax2(){
						document.getElementById('first').style.cssText='background-color:white ;';
						document.getElementById('second').style.cssText='background-color: #4390ff;color: white;';
						document.getElementById('third').style.cssText='background-color: white;';	
						document.getElementById('ma').style.cssText='display: none;';
						document.getElementById('ma1').style.cssText='display: block;';
				}
				function chax3(){
						document.getElementById('first').style.cssText='background-color: white;';
						document.getElementById('second').style.cssText='background-color: white;';
						document.getElementById('third').style.cssText='background-color: #4390ff;color: white;';	
				}
				function bianse1(){
						document.getElementById('dj1').style.cssText='background-color: #1746b4;';
						document.getElementById('dj2').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj3').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj4').style.cssText='background-color: #68a9ff;';
				}
				function bianse2(){
						document.getElementById('dj1').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj2').style.cssText='background-color: #1746b4;';
						document.getElementById('dj3').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj4').style.cssText='background-color: #68a9ff;';
				}
				function bianse3(){
						document.getElementById('dj1').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj2').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj3').style.cssText='background-color: #1746b4;';
						document.getElementById('dj4').style.cssText='background-color: #68a9ff;';
				}
				function bianse4(){
						document.getElementById('dj1').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj2').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj3').style.cssText='background-color: #68a9ff;';
						document.getElementById('dj4').style.cssText='background-color: #1746b4;';
				}
			</script>
	</body>
</html>
